<!-- 讲义-->
<template>
  <div class="lecture-list-box">
    <template v-if="renderList.length">
      <ul class="lecture-list">
        <li
          class="lecture-item"
          v-for="(item, index) in renderList"
          :key="index"
          :id="'a' + item.second"
        >
          <div
            @click="setVideoPostion(item)"
            class="lecture-item-title flex-center-wrap c-8c f12"
          >
            <img
              v-if="+currentSecond !== +item.second"
              class="play-icon-white mr6"
              src="//image.zlketang.com/public/news/images/new_official/play/play_icon_white.png"
              alt=""
            />
            <img
              class="playing"
              v-if="+currentSecond === +item.second"
              src="//image.zlketang.com/public/news/images/new_official/play/play_icon.gif"
            />
            <span
              class="mr4"
              :class="{ orange: +currentSecond === +item.second }"
            >
              {{ item.show_second }}
            </span>
            <img
              v-if="+currentSecond === +item.second"
              class="lecture-label"
              src="//image.zlketang.com/public/news/images/new_official/play/lecture_label.png"
              alt=""
            />
          </div>
          <div class="rel lecture-item-body mt16">
            <div @click="prevImg" v-html="parseHtmlUrl(item.content)"></div>
            <div v-if="+item.key_note_type === 2 && item.ext_content">
              <zl-collapse
                v-model="item.isShow"
                :cIndex="index"
                :selectedSection="selectedSection"
                :minHeight="0"
                @min-updata="minUpdata"
              >
                <div>
                  <div class="an-title">
                    答案解析
                  </div>
                  <div
                    @click="prevImg"
                    v-html="parseHtmlUrl(item.ext_content)"
                  ></div>
                </div>
              </zl-collapse>
              <div
                class="flex-center switch-btn"
                @click.stop="changeHideType(index)"
              >
                {{ item.isShow ? '收起解析' : '查看解析' }}
              </div>
            </div>
            <!-- 无权限时，遮挡讲义最后一条 -->
            <div
              class="power-mask"
              v-if="+point_power === 0 && renderList.length - 1 === index"
            >
              <button
                class="lecture-btn f12 flex-center"
                @click.stop="openDialog"
              >
                联系老师获取完整讲义
                <img
                  class="arrow-right2"
                  src="//image.zlketang.com/public/news/images/new_official/play/arrow_right2.png"
                />
              </button>
            </div>
          </div>
        </li>
      </ul>
      <div class="no-nore-text f12" v-if="+point_power === 1">没有更多了</div>
    </template>
    <template v-if="!renderList.length">
      <div class="no-data">
        <div class="flex-center">
          <img
            class="empty-img"
            src="//image.zlketang.com/public/news/images/new_official/play/empty.png"
            alt="空状态"
          />
        </div>

        <div class="flex-center tc f14 empty-text">
          本节暂无内容
          <br />
          联系老师免费领取课程配套讲义
        </div>
        <div class="flex-center contact-teacher" @click="openDialog">
          立即联系老师
          <img
            class="arrow-right"
            src="//image.zlketang.com/public/news/images/new_official/play/arrow_right.png"
            alt="右箭头"
          />
        </div>
      </div>
    </template>

    <!-- 联系客服弹窗 -->
    <div class="lecture-kefu-dialog-mask flex-center" v-if="showDialog">
      <div class="lecture-kefu-dialog">
        <span class="dialog-close flex-center" @click="closeDialog">
          &times;
        </span>
        <div class="dialog-title">
          添加老师微信获取完整配套讲义
        </div>
        <div class="flex-center">
          <img class="qrcode-img" :src="qrcode_url" alt="" />
        </div>
        <div class="dialog-footer flex-center">
          微信扫码立即咨询
        </div>
      </div>
    </div>
    <image-preview :show.sync="isShowPrev" :url="currentImg"></image-preview>
  </div>
</template>
<script>
import zlCollapse from '@/components/zlCollapse/index.vue'
import imagePreview from './note/imagePreview.vue'

export default {
  name: 'lectureIndex',
  components: {
    'image-preview': imagePreview,
    'zl-collapse': zlCollapse
  },
  props: {
    selectedSection: {
      type: String,
      default: ''
    },
    isChangeType: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showDialog: false,
      // 客服二维码
      qrcode_url:
        '//image.zlketang.com/public/news/images/new_official/play/qrcode.png',
      // 当前选中讲义
      active: '',
      point_power: 0,
      // 讲义数据（数组）
      list: [],
      isShowPrev: false,
      currentImg: ''
    }
  },
  computed: {
    currentSecond() {
      return this.$store.state.play.currentSecond
    },
    renderList() {
      let { playingSection } = this.$store.state.play
      if (!playingSection) return
      let { point_power, points } = playingSection
      this.point_power = point_power
      points = Array.isArray(points) ? points : []
      // 过滤掉没有内容的讲义,讲义改版之后可能只绑定了知识点却没有内容
      points = points.filter(item => item.content)
      // this.active = points.length ? points[0].show_second : ''
      // 无权限
      if (+this.point_power === 0) {
        let maxNum = Math.floor(points.length / 2)
        return maxNum === 0 ? points : points.slice(0, maxNum)
      }
      // 存在权限
      return points
    }
  },
  watch: {
    currentSecond: {
      handler(newVal) {
        if (typeof window !== 'undefined') {
          this.locationLecture(newVal)
        }
      }
    }
  },
  methods: {
    async minUpdata({ cIndex }) {
      this.$emit('changeIsChangeType', true)
      let list = this.renderList.map((item, indey) => {
        if (+cIndex === +indey) {
          item.isHide = true
        }
        return item
      })
      this.$store.commit('play/SET_POINT', list)
      await this.sleep(50)
      this.$emit('changeIsChangeType', false)
    },
    // 修改讲义的展开收起状态
    async changeHideType(index) {
      this.$emit('changeIsChangeType', true)
      let list = this.renderList.map((item, indey) => {
        if (index === indey) {
          item.isShow = !item.isShow
        }
        return item
      })
      this.$store.commit('play/SET_POINT', list)
      await this.sleep(50)
      this.$emit('changeIsChangeType', false)
    },
    // 预览讲义中的图片
    prevImg(e) {
      let eventDom = e.target
      let domName = eventDom.tagName
      if (domName !== 'IMG') return
      let url = eventDom.src
      this.currentImg = url
      this.isShowPrev = true
    },
    openDialog() {
      this.showDialog = true
    },
    closeDialog() {
      this.showDialog = false
    },
    setVideoPostion(item) {
      let { second } = item
      second = +second
      this.$emit('change', second)
    },
    // 定位讲义位置
    locationLecture(newVal) {
      // 判断当前Tab是否显示的是讲义
      let isLectureTabShow = this.$el.parentElement.style.display !== 'none'
      let currentEl = document.querySelector('#a' + newVal)
      let scrollEl = document.querySelector('.lecture-list-box')
      // 若未显示当前Tab，则不执行滚动操作
      if (!isLectureTabShow || !currentEl || !scrollEl) return
      let offsetTop = currentEl.offsetTop
      scrollEl.scrollTo({
        behavior: 'smooth',
        top: offsetTop
      })
    }
  }
}
</script>
<style scoped name="csslint-ignore">
.rel {
  position: relative;
}
.f12 {
  font-size: 12px;
}
.c-8c {
  color: #8c8c8c;
}
.mt16 {
  margin-top: 16px;
}
.mr4 {
  margin-right: 4px;
}
.mr6 {
  margin-right: 6px;
}
.orange {
  color: #ff9240;
}
.lecture-list-box {
  position: relative;
  height: calc(100% - 94px);
  overflow-y: auto;
  /* 不要滚动条 */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.lecture-list-box::-webkit-scrollbar {
  display: none;
}

.lecture-list {
  word-break: break-all;
  background-color: #1a1a1a;
}
.lecture-item {
  background-color: #212121;
  padding: 16px 20px 20px;
}
.lecture-item + .lecture-item {
  margin-top: 8px;
}
.lecture-label {
  width: 132px;
  height: 19px;
}
.play-icon-white {
  width: 16px;
  height: 16px;
}
.lecture-item-title {
  cursor: pointer;
}
.lecture-item-body {
  padding: 10px;
  /* border: 1px dashed #423b38; */
  border-radius: 4px;
  background-color: #fff;
  overflow: hidden;
  transition: all 0.5s;
}
/* 2023.07.13修改讲义中，有图片就会错位的BUG */
.lecture-item-body >>> p:has(img) {
  text-indent: 0 !important;
}
.lecture-item-body >>> img {
  max-width: 100% !important;
  height: auto !important;
}
.lecture-item-body >>> * {
  font-size: 14px;
  line-height: 150%;
  /* color: #fff !important; */
}
.lecture-item-body >>> table {
  table-layout: fixed;
  width: 100% !important;
}
.lecture-item-body >>> td,
.lecture-item-body >>> th {
  width: auto !important;
}
.no-nore-text {
  padding: 20px 0;
  text-align: center;
  color: #737373;
}
.lecture-kefu-dialog-mask {
  z-index: 100;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}
.lecture-kefu-dialog {
  position: relative;
  width: 500px;
  height: 327px;
  padding-top: 50px;
  background: linear-gradient(
    180deg,
    #e6f2ff 0%,
    #f5f9ff 45%,
    #ffffff 100%,
    #ffffff 100%
  );
  border-radius: 12px;
}
.dialog-title {
  height: 25px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #3480ff;
  line-height: 25px;
}

.qrcode-img {
  width: 180px;
  height: 180px;
  margin-top: 20px;
  border: 1px solid #f0f1f2;
}
.dialog-footer {
  margin-top: 10px;
  color: #1a2840;
}
.dialog-close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: #ccc;
  cursor: pointer;
}
.power-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 270px;
  height: 84px;
  background: linear-gradient(
    to bottom,
    rgba(33, 33, 33, 0) 0%,
    rgba(33, 33, 33, 1) 50%,
    #212121 100%
  );
  /* background: linear-gradient(to bottom, rgba(33, 33, 33, 0) 0%, #212121 100%); */
}
.lecture-btn {
  -webkit-transform: translateX(-50%);
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 148px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid #80b0ff;
  color: #80b0ff;
  transform: translateX(-50%);
  cursor: pointer;
}
.no-data {
  margin-top: 131px;
  color: #b3b3b3;
}
.contact-teacher {
  cursor: pointer;
  height: 20px;
  line-height: 20px;
  margin-top: 6px;
  font-size: 14px;
  color: #2f71de;
  font-family: 'PingFangSC-Regular, PingFang SC';
}
.arrow-right {
  width: 16px;
  height: 16px;
}
.empty-img {
  display: block;
  width: 122px;
  height: 79px;
}
.empty-text {
  height: 40px;
  margin-top: 10px;
  font-size: 14px;
  font-family: 'PingFangSC-Regular, PingFang SC';
  font-weight: 400;
  color: #8c8c8c;
  line-height: 20px;
}
.tc {
  text-align: center;
}
.arrow-right2 {
  display: block;
  width: 6px;
  height: 10px;
  margin-left: 2px;
}
.orange {
  color: #ff9240;
}
.playing {
  display: block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
}
.h-50 {
  height: 50px;
}
.h-auto {
  height: auto;
}
.switch-btn {
  margin-top: 12px;
  width: 68px;
  cursor: pointer;
  height: 26px;
  border-radius: 4px;
  border: 1px solid #80b2f3;
  font-size: 12px;
  font-weight: 400;
  color: #80b2f3;
}
.an-title {
  position: relative;
  margin: 10px 0 4px;
  height: 20px;
  font-size: 14px;
  font-weight: 600;
  color: #383838;
  line-height: 20px;
  padding-left: 12px;
}
.an-title::before {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 14px;
  background: #3480ff;
}
</style>
